<template>
  <div class="indexSubject">
    <div class="indexHeader">
      <div class="headerTitle"><p>漫画世界</p></div>
      <div class="headerMain">
        <van-search
          v-model="searchValue"
          show-action
          placeholder="请输入"
          clearable
          @cancel="searchIconState()"
          @search="serchCommit()"
          :class="[{ searchInputShow: searchstate === true }]"
        >
          <template #left-icon>
            <van-icon name="search" @click="serchCommit()" />
          </template>
        </van-search>
        <van-icon
          name="search"
          :class="['searchIcon', { searchHidden: searchstate === true }]"
          @click="searchIconState()"
        />
        <van-icon name="contact" class="userIcon" @click="toLoginOrUserInfo" />
      </div>
    </div>
    <div class="indexMain"><router-view /></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      searchstate: false,
      searchValue: ''
    };
  },
  methods: {
    toLoginOrUserInfo () {
      this.$router.push({
        path: '/login'

      });
    },
    searchIconState () {
      this.searchstate = !this.searchstate;
    },
    serchCommit () {
      if (this.searchValue === null || this.searchValue === '') {
        this.$toast('搜索内容不能为空');
        return;
      }
      this.$router.push({
        path: '/comicResult',
        query: {
          value: this.searchValue,
          distinguish: 'search'
        }
      });
    }
  },
  created () {
    //
    var indexMainChief = window.sessionStorage.getItem('indexMainChief');
    if (indexMainChief === null) {
      window.sessionStorage.setItem('indexMainChief', '/indexMainChief');
      this.$router.push('/indexMainChief');
    } else {
      this.$router.push(indexMainChief);
    }
  }
};
</script>
<style lang="less" scoped>
.indexSubject {
  height: 100%;
  width: 100%;
  background-color: aqua;
  display: flex;
  flex-direction: column;
}
.indexSubject .indexHeader {
  height: 45px;
  width: 100%;
  background-color: palegoldenrod;
  // position: relative;
  // top: 0px;
  display: flex;
  flex-direction: row;
  .headerTitle {
    width: 100px;
    height: 100%;
    font-size: 22px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a900ff;
  }
  .headerMain {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    /deep/ .van-search {
      padding: 0px;
      height: 22px;
      opacity: 0;
      visibility: hidden;

      .van-search__content {
        padding-left: 3px;
        .van-cell {
          height: 22px;
          padding: 0px;
          .van-cell__value {
            width: 20px;
            transition: width 0.8s;
          }
        }
      }

      .van-search__action {
        height: 22px;
        line-height: 22px;
      }
    }
    .searchIcon {
      font-size: 22px;
    }
    .userIcon {
      font-size: 25px;
      margin-left: 5px;
      margin-right: 8px;
    }
    //搜索栏样式
    .searchHidden {
      display: none;
    }
    .searchInputShow {
      opacity: 1;
      visibility: visible;
      /deep/ .van-search__content .van-cell .van-cell__value {
        width: 143px;
      }
    }
  }
}
.indexSubject .indexMain {
  flex: 1;
  width: 100%;
  height: 0;
}
</style>
